<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
    data: {
        type: Array,
        default: () => [],
    },
    data1: {
        type: Array,
        default: () => [],
    },
    data2: {
        type: Array,
        default: () => [],
    },
})
// const linexData = ref([
//     '呼和浩特市',
//     '包头市',
//     '鄂尔多斯市',
//     '乌兰察布市',
//     '乌海市',
//     '巴彦淖尔',
//     '阿拉善盟',
//     '兴安盟',
//     '通辽市',
//     '赤峰市',
//     '呼伦贝尔市',
//     '锡林郭勒盟',
// ])
// const linesData = ref([237, 103, 479, 236, 479, 200, 234, 143, 345, 256, 89, 228])
// const linesData1 = ref([237, 105, 471, 236, 479, 189, 234, 123, 345, 246, 89, 199])
// let data = {
//     chart: [
//         {
//             month: '2016',
//             value: 138,
//             ratio: 14.89,
//         },

//         {
//             month: '2017',
//             value: 114,
//             ratio: 79.49,
//         },

//         {
//             month: '2018',
//             value: 714,
//             ratio: 75.8,
//         },

//         {
//             month: '2019',
//             value: 442,
//             ratio: 19.8,
//         },

//         {
//             month: '2020',
//             value: 622,
//             ratio: 44.5,
//         },

//         {
//             month: '2021',
//             value: 528,
//             ratio: 87.3,
//         },
//         {
//             month: '2022',
//             value: 528,
//             ratio: 87.3,
//         },
//     ],
// }

// //  x轴数据          象形柱图数据  折线图数据
// let xAxisMonth = [],
//     barData = [],
//     lineData = []
// for (let i = 0; i < data.chart.length; i++) {
//     xAxisMonth.push(data.chart[i].month)
//     barData.push({
//         name: xAxisMonth[i],
//         value: data.chart[i].value,
//     })
//     lineData.push({
//         name: xAxisMonth[i],
//         value: data.chart[i].ratio,
//     })
// }
var xdata = ['呼和浩特市', '区直登记点', '市登记点', '包头市', '鄂尔多斯市', '赤峰市', '锡林郭勒盟', '兴安盟', '通辽市', '呼伦贝尔市', '乌海市', '巴彦淖尔市', '阿拉善盟', '乌兰察布市']
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    legend: {
        show: false,
        top: '-2%',
        textStyle: {
            color: '#FFFFFF',
        },
        icon: 'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        type: 'scroll'
    },
    grid: {
        left: '0%',
        right: '4%',
        bottom: '0%',
        top: '15%',
        containLabel: true,
    },
    // dataZoom: {
    //     show: false,
    //     startValue,
    //     endValue
    // },
    xAxis: {
        data: props.xData,
        triggerEvent: true,
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 12,
                color: 'rgba(255,255,255,1)',
            },
            formatter: function(e) {
                let str = ''
                let arr = e.split('')
                for (let i = 0; i < arr.length; i++) {
                    str += arr[i] + '\n'
                }
                return str
            },
        },
    },
    yAxis: {
        name: '',
        triggerEvent: true,
        nameTextStyle: {
            color: 'rgba(255,255,255,1)',
            fontSize: 16,
            padding: [0, 0, 10, -20],
        },
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: 'rgba(108, 128, 151, 0.3)',
            },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,.1)',
            },
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'rgba(255, 255, 255, 0.5)',
                fontSize: 12,
            },
        },
    },
    // color: ["#e54035"],
    series: [
        {
            name: '成果登记数(项)',
            // barMinHeight: 100,
            type: 'bar',
            // type: 'pictorialBar',
            // barCategoryGap: '60%',
            symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            // symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#009DFF',
                        },
                        {
                            offset: 1,
                            color: '#00EEFD',
                        },
                    ]),
                },
            },
            barWidth: 20,
            data: props.data,
        },
    ],
}
const chart = ref()
// let timer2 = null
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    // timer2 = setInterval(() => {
    //     const item1 = props.xData.shift()
    //     props.xData.push(item1)
    //     const item2 = props.sData.shift()
    //     props.sData.push(item2)
    //     myChart.setOption(option)
    // }, 2000)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
